<!-- 卡片 数据 -->
<template>
    <div>
        <!-- table区 -->
        <a-table :columns="columns" :data-source="data" :pagination="paginationConfig" bordered :loading="loading">
            <template #title>
                <div class="account_card">
                    <a-alert message="这个余额卡片数据" type="success" show-icon class="cal_alert" />
                    <a-button type="primary" :icon="h(RedoOutlined)" @click="refresh"
                        style="margin-right: 10px;">刷新</a-button>
                    <a-button type="primary" :icon="h(PlusOutlined)" @click="addCardsFun">新增</a-button>
                </div>
            </template>
            <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'card_avatar'">
                    <a-image :width="100" :height="100" :src="record.card_avatar"
                        fallback="" />
                </template>
                <template v-if="column.key === 'action'">
                    <a-button type="link" @click="handleEdit(record)">编辑</a-button>
                    <a-popconfirm title="Sure to delete?" @confirm="handleDelete(record.id)">
                        <a-button danger type="text" >删除</a-button>
                    </a-popconfirm>

                </template>
            </template>
            <template #footer>
                <div class="count_total">
                    <span style="margin-right: 10px;">统计总数:</span>
                    <span style="margin-right: 10px;color: #1890ff;">{{ totalData }}
                        <PayCircleOutlined />
                    </span>
                </div>
            </template>
        </a-table>
        <EditCardModle v-model:show="show" :editData="editData" @loadData="refresh" />
    </div>
</template>

<script setup lang="ts">
import { computed, h, onMounted, ref } from 'vue';
import { PlusOutlined, RedoOutlined, PayCircleOutlined } from '@ant-design/icons-vue';
import EditCardModle from './Model/EditCardModle.vue';
import { useMicroGlobalData } from '@/stores/microGlobalData';
import { message } from 'ant-design-vue';

const store = useMicroGlobalData();
const loading = ref(false);
const paginationConfig = ref({
    current: 1,
    pageSize: 10,
    total: 50,
    'show-size-changer': true,
})

const columns = [
    {
        title: '名称',
        dataIndex: 'card_name',
    }, {
        title: '初始值',
        dataIndex: 'initial_amount',
    },
    {
        title: '金额',
        dataIndex: 'current_amount',
    },
    {
        title: '颜色',
        dataIndex: 'card_color',
    },
    {
        title: '图标',
        dataIndex: 'card_avatar',
        key: 'card_avatar',
    },
    {
        title: '操作',
        key: 'action',
    }
];
export interface TableDataType {
    id: number
    uid: number
    initial_amount: string
    card_name: string
    current_amount: string
    card_avatar: string
    card_color: string
}
const data = ref<TableDataType[]>([])
const totalData = computed(() => {
    return data.value.reduce((prev, curr) => {
        return prev + Number(curr.current_amount)
    }, 0)
})
const fetchData = async () => {
    loading.value = true;
    const params = {
        page: paginationConfig.value.current,
        pageSize: paginationConfig.value.pageSize
    }
    const res = await store.microGlobalData.axiosInstance?.get<{ page: number, pageSize: number }, TableDataType[]>({ url: '/account/cards', _params: params }, true);
    console.log("🚀 ~ fetchData ~ res:", res)
    loading.value = false;
    data.value = res!;
}
const refresh = () => {
    paginationConfig.value.current = 1;
    paginationConfig.value.pageSize = 10;
    fetchData();
}
onMounted(() => {
    fetchData();
})

// 新增
const addCardsFun = () => {
    editData.value = {} as TableDataType;
    show.value = true;
}
// 编辑
const show = ref(false);
const editData = ref<TableDataType>({} as TableDataType);
const handleEdit = (record: TableDataType) => {
    console.log(record);
    editData.value = record;
    show.value = true;
};

const handleDelete = async (id: number) => {
    const res = await store.microGlobalData.axiosInstance?.delete<{ id: number }, string>({ url: `/account/cards/${id}` }, true);
    if (res) {
        console.log("🚀 ~ handleDelete ~ res:", res)
        message.success('删除成功');
    }
    fetchData();
};


</script>

<style lang="scss" scoped>
.account_card {
    display: flex;
    justify-content: center;
    align-items: center;

    .cal_alert {
        flex: 1;
        margin-right: 10px;
    }
}

th.column-money,
td.column-money {
    text-align: right !important;
}

.count_total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
</style>